<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" style="background-color: f6f7fb;">
		<view class="container">
			<view class="search">
				<up-search placeholder="搜索" v-model="value" :show-action="false" :clearabled="true" 
					@search="search"></up-search>
			</view>
			<view class="content">
				<view class="informationList" v-for="(item,index) in dataList" :key="index">
					<view class="topTitleDate">
						<view class="profilePicture">
							<image :src="item.creator_avatar" mode="" style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="name">
							{{item.creator_nickname}}
						</view>
						<view class="dateTime">
							{{item.create_datetime}}
						</view>
					</view>
					<view class="comment">
						<up-read-more showHeight="70">
							<rich-text :nodes="item.content"></rich-text>
							<view class="imgComment">
								<view class="itemImage" v-for="(items,indexs) in item.images">
									<image :src="items" mode="aspectFit" style="width: 300rpx;height: 300rpx;"
										@click="preview(item.images,indexs)"></image>
								</view>
							</view>
						</up-read-more>
					</view>
					<view class="bottomContent">
						<view class="evaluate" @click="commentClick(item)">
							<up-search placeholder="说点什么..." disabled v-model="name" :show-action="false" height="25"
								:clearabled="true" searchIcon="edit-pen" bgColor="#f6f6f6"
								style="font-size: 20rpx;"></up-search>
						</view>
						<view class="rightEvaluate">
							<view class="like" @click="likeClick(item)">
								<image v-if="!item.is_liked" src="../../static/InternalCommunication/likeGray.png"
									mode="" style="width: 50rpx;height: 50rpx;"></image>
								<image v-else src="../../static/InternalCommunication/likeBlue.png" mode=""
									style="width: 50rpx;height: 50rpx;"></image>
								<view class="value">
									{{item.like_count}}
								</view>
							</view>
							<view class="like" @click="commentClick(item)">
								<image src="../../static/InternalCommunication/commentGray.png" mode=""
									style="width: 50rpx;height: 50rpx;"></image>
								<view class="value">
									{{item.comment_count}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="Post" @click="post">
				发帖
			</view>
		</view>
		
		<up-toast ref="uToastRef"></up-toast>
	</z-paging>
	<up-popup :show="showPopup" @close="close" :round="10" mode="bottom" closeable="true">
		<view style="height: 70vh;">
			<commentPage :commentidProps="commentidProps"></commentPage>
		</view>
	</up-popup>
</template>

<script>
	import {
		forumList,
		forumPost,
		likeId,
	} from '../../api/InternalCommunication.js'
	import commentPage from './comment.vue'
	export default {
		components: {
			commentPage
		},
		data() {
			return {
				show: false,
				showPopup: false,
				dataList: [],
				value: '',
				name: '',
				commentidProps: '', //ID
			};
		},
		created() {
			// forumPost({
			// 	content: 'uni-app',
			// 	images: []
			// }).then((res) => {

			// })

			// commentId({
			// 	content:'评论啦！！！！'
			// },2).then((res)=>{

			// })
		},
		onLoad() {
			uni.$once('queryList', () => {
				this.queryList(1,10);
			});
		},
		methods: {
			post() { //发帖
				uni.navigateTo({
					url: './post'
				})
			},
			commentClick(item) {
				this.commentidProps = item.id
				this.showPopup = true
			},
			close() {
				this.showPopup = false
				this.queryList(1,10);
			},
			likeClick(e) {
				this.dataList.forEach((item) => {
					if (e.id == item.id) {
						if (e.is_liked == true) {
							item.like_count = Number(item.like_count - 1)
						} else {
							item.like_count = Number(item.like_count + 1)
						}
						item.is_liked = !item.is_liked
					}
				})
				likeId(e.id).then((res) => {
					this.$refs.uToastRef.show({
						type: 'success',
						icon: false,
						message: res.msg,
					})
				})
			},
			search() {
				this.queryList(1,10)
			},
			queryList(pageNo, pageSize) {

				forumList({
					page: pageNo,
					limit: pageSize
				}).then((res) => {
					this.$refs.paging.complete(res.data);
				})
			},
			preview(urls, index) {
				uni.previewImage({
					urls: urls
				})
			}
		}
	}
</script>

<style lang="scss">
	.zp-paging-container {
		background-color: #f6f7fb;
	}

	.z-paging-content {
		background-color: #f6f7fb;
	}

	.container {
		background-color: #f6f7fb;
		padding: 0 25rpx;
		position: relative;

		.Post {
			position: fixed;
			right: 80rpx;
			bottom: 300rpx;
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
			background-color: #eb8a1d;
			color: #fff;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
		}

		.search {
			padding: 18rpx 0;
			background-color: #f6f7fb;
		}

		.content {
			// padding: 25rpx;

			.informationList {
				background-color: #fff;
				padding: 25rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.topTitleDate {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.profilePicture {
						border-radius: 50%;
						overflow: hidden;
					}

					.name {
						font-size: 32rpx;
						margin-left: 20rpx;
						flex: 1;
					}

					.dateTime {
						text-align: right;
						font-size: 24rpx;
						color: #9fa0a2;
						margin-right: 30rpx;
					}
				}

				.comment {
					margin-top: 20rpx;
					font-size: 32rpx;

					.imgComment {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						.itemImage {
							width: calc((100%/2) - 40rpx);
							margin-bottom: 20rpx;
							overflow: hidden;

							image {
								object-fit: contain;
							}
						}

						.itemImage:nth-child(odd) {
							margin-right: 20rpx;
						}

					}
				}

				.bottomContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.evaluate {
						width: 50%;
					}

					.rightEvaluate {
						width: 50%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.like {
							display: flex;
							margin-right: 40rpx;
							align-items: center;

							image {
								margin-right: 10rpx;
							}

							.value {
								font-size: 25rpx;
							}
						}
					}
				}
			}

		}


	}
</style>